let html = document.querySelector("#demo");
let style = document.querySelector("#style");
string = `
 /*你好，我是王震
  *接下来，我为你展示一下我的前端功底
  *首先，创建一个 div
  */
#div1{
    border:1px solid red;
    height:400px;
    width:400px;
    background-color:yellow;
}
/*接下来，我将把这个 div 变成一个八卦图
 *注意看好了
 */
#div1{
    border-radius:50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border:none;
}
/*八卦是阴阳形成的
 *一黑一白
 */
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%);
}
/*再来两个神秘的小球*/
#div1::before{
    width:200px;
    height:200px;
    top:0;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background-color:#000;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%);
}
#div1::after{    
    width:200px;
    height:200px;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background-color:#fff;
    background: radial-gradient(circle, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 26%);
}
`;

// 之所以要加一个 string2 进来，就是为了后续对 string 进行操作
let string2 = "";
let n = 0;

// 这里我们实现了用一个函数模拟 setinterval,
// 这样做的好处就是，可以更方便的停止函数
let step = () => {
  setTimeout(() => {
    if (string[n] === "\n") {
      string2 += "<br>";
    } else if (string[n] === " ") {
      string2 += "&nbsp";
    } else {
      string2 += string[n];
    }
    html.innerHTML = string2;
    style.innerHTML = string.substring(0, n);
    window.scrollTo(0,999999);
    html.scrollTo(0,99999)
    if (n + 1 >= string.length) {
      return;
    } else {
      n += 1;
    }
    step();
  }, 50);
};

step();
